<template>
  <div class="setting-r-content">
    <div class="search-content">
      <Col class="panel search-panel" span="24">
      <Form :model="searchForm" :label-width="80" inline>
        <FormItem label="姓名：">
          <Input v-model="searchForm.uname" placeholder="请输入搜索姓名..." clearable style="width: 200px" />
        </FormItem>
        <FormItem label="类型：">
          <Select v-model="searchForm.roleId" style="width: 200px;" clearable>
            <Option v-for="(item, index) in userGroupList" :key="index" :value="item.id" :label="item.description" />
          </Select>
        </FormItem>
        <FormItem class="margin-l">
          <Button type="primary" @click="onSearch">查询</Button>
          <Button type="primary" @click="onNewForm" style="margin-left: 10px;">新增</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="w1 setting-scroll__content">
      <Row class="setting-content__row">
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24">
        <Table :columns="columns" :data="tableDatas" border style="width: 100%;" :loading="loading" />
        </Col>
        <Col class="panel page-panel cf" :span="24" style="margin-bottom: 10px;">
        <Page :total="pageInfo.total" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging" :page-size="15"></Page>
        </Col>
        <Col :span="24" class="page-bottom">
        </Col>
        <!-- 新增表单 -->
        <Modal :closable="false" v-model="dialogVisibleForNew" title="新增用户" :footer-hide="true" width="600">
          <BuildUserForm @off="offNewBuild" v-if="dialogVisibleForNew" @save="onSave" />
        </Modal>
        <!-- 编辑表单 -->
        <Modal :closable="false" v-model="dialogVisibleForEdit" title="编辑用户" :footer-hide="true" width="600">
          <EditUserForm :userId="userId" @off="offEdit" v-if="dialogVisibleForEdit" @save="onSaveEdit" />
        </Modal>
        <!-- 重置密码 -->
        <Modal :closable="false" v-model="dialogVisibleForReset" title="重置密码" :footer-hide="true">
          <ResetPwdForm :userId="userId" @off="offReset" v-if="dialogVisibleForReset" @save="onSaveReset" />
        </Modal>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BuildUserForm from "./BuildUserForm";
import EditUserForm from "./EditUserForm";
import ResetPwdForm from "./ResetPwdForm";
import { getUserAll, getUserGroupList, removeUser, kickUser } from "@/api";
import { generateColumns, generateRules } from "./utils";

export default {
  components: {
    BuildUserForm,
    EditUserForm,
    ResetPwdForm
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  data() {
    return {
      // 顶部搜索
      searchForm: {
        roleId: "",
        uname: ""
      },
      userId: "",

      // 新建用户对话框
      dialogVisibleForNew: false,

      // 编辑用户对话框
      dialogVisibleForEdit: false,

      // 重置密码对话框
      dialogVisibleForReset: false,

      // 用户组列表
      userGroupList: [],

      columns: [...generateColumns(this)],
      loading: false,
      tableDatas: [],
      pageInfo: {
        total: 0,
        page: 1
      }
    };
  },
  mounted() {
    this.getInitaialState();
    this._getGroupList();
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1;
      this.getInitaialState();
    },
    offNewBuild() {
      this.dialogVisibleForNew = false;
    },
    offEdit() {
      this.dialogVisibleForEdit = false;
    },

    offReset() {
      this.dialogVisibleForReset = false;
    },
    switchThePaging(index) {
      this.pageInfo.page = index;
      this.getInitaialState();
    },

    // 获取本页显示主数据
    getInitaialState() {
      const vm = this;
      vm.loading = true;
      let params = {
        uname: vm.searchForm.uname,
        roleId: vm.searchForm.roleId,
        size: 15,
        page: vm.pageInfo.page
      };
      getUserAll(params).then(res => {
        if (res.code == 200) {
          vm.tableDatas = res.data.list;
          vm.pageInfo.total = res.data.total;
          vm.loading = false;
        }
      });
    },

    //获取用户组列表
    _getGroupList() {
      getUserGroupList().then(res => {
        if (res.code === 200) {
          this.userGroupList = res.data;
        }
      });
    },

    // 新增用户
    onNewForm() {
      this.dialogVisibleForNew = true;
    },

    // 保存成功
    onSave() {
      this.getInitaialState();
      this.dialogVisibleForNew = false;
    },

    // 编辑保存
    onSaveEdit() {
      this.getInitaialState();
      this.dialogVisibleForEdit = false;
    },

    // 重置密码保存
    onSaveReset() {
      this.dialogVisibleForReset = false;
    },

    // 显示编辑表单
    handelEdit(row) {
      this.userId = row.id;
      this.dialogVisibleForEdit = true;
    },

    // 删除
    handelDelete(row) {
      removeUser(row.id).then(res => {
        if (res.code == 200) {
          this.$Message.success("删除成功");
          this.getInitaialState();
        }
      });
    },

    // 重置密码
    handelReset(row) {
      this.userId = row.id;
      this.dialogVisibleForReset = true;
    },
  }
};
</script>
